<script setup>
import { onMounted, nextTick, ref, reactive, watch, computed, watchEffect } from 'vue'
import { ElMessage } from 'element-plus'
import { getBargeShip, getFisherShip, deleteBargeShip, deleteFisherShip, addBargeShip, addFisherShip, addFisherShipFile, getUser, addUser, deleteUser, editUser } from '../network/net.js'
import fisherDemoPng from '../assets/img/fisher_demo.png'

onMounted(() => {
    getBargeShipDataIn()
    getFisherShip().then(res => {
        fishers.value = res.data.data.map(item => {
            return {
                value: item.name,
                label: item.name,
            }
        })
    })
    getBargeShip().then(res => {
        bargeShips.value = res.data.data.map(item => {
            return {
                value: item.name,
                label: item.name,
            }
        })
    })
})

const tableData = ref([])
const getBargeShipDataIn = () => {
    getUser().then(res => {
        tableData.value = res.data.data.map(item => {
            return {
                id: item.id,
                username: item.username,
                password: item.password,
                role: item.role,
                bargeShip: item.bargeShip,
                fisherShip: item.fisherShip.split(','),
            }
        })
    })
}

const handleDelete = (row) => {
    deleteUser(row.id).then(res => {
        if (res.data.code === 200) {
            ElMessage.success('删除成功')
            getBargeShipDataIn()
        } else {
            ElMessage.error('删除失败')
        }
    })
}

const fishers = ref([])
const bargeShips = ref([])

const form = reactive({
    username: '',
    password: '',
    role: '',
    bargeShip: '',
    fisherShip: []
})

const addBargeShipIn = () => {
    // name必须有
    if (form.username == "" || form.password == "" || form.role == "") {
        ElMessage.error('重新填！')
        return
    }
    form.fisherShip = form.fisherShip.join(',')
    addUser(form).then(res => {
        if (res.data.code === 200) {
            ElMessage.success('添加成功')
            getBargeShipDataIn()
        } else {
            ElMessage.error('添加失败')
        }
    })
}

const userType = ref('')

const tableDataComputed = computed(() => {
    if (userType.value == '') {
        return tableData.value
    } else {
        return tableData.value.filter(item => item.role == userType.value)
    }
})

const activeCell = reactive({
    id: "",
    prop: ""
})

const handleActive = (row, prop) => {
    activeCell.id = row.id
    activeCell.prop = prop
}

const handleEdit = (row) => {
    activeCell.id = ""
    activeCell.prop = ""
    row.fisherShip = row.fisherShip.join(',')
    editUser(row).then(res => {
        if (res.data.code === 200) {
            ElMessage.success('修改成功')
            getBargeShipDataIn()
        } else {
            ElMessage.error('修改失败')
        }
    })
}
</script>

<template>
    <div id="user">
        <div id="list">
            <el-radio-group v-model="userType" style="padding: 15px;">
                <el-radio value="" size="large" border>全部</el-radio>
                <el-radio value="jh" size="large" border>稽核</el-radio>
                <el-radio value="ym" size="large" border>渔民</el-radio>
                <el-radio value="jg" size="large" border>审核</el-radio>
            </el-radio-group>
            <el-table :data="tableDataComputed" border height="calc(100% - 40px)">
                <!-- 索引 -->
                <el-table-column type="index" label="序号" width="80" />
                <el-table-column prop="username" label="用户名">
                    <template #default="{ row }">
                        <template v-if="activeCell.id == row.id && activeCell.prop == 'username'">
                            <el-input v-model="row.username" placeholder="" size="normal"></el-input>
                        </template>
                        <template v-else>
                            <div @click="handleActive(row, 'username')">{{ row.username }}</div>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="password" label="密码">
                    <template #default="{ row }">
                        <template v-if="activeCell.id == row.id && activeCell.prop == 'password'">
                            <el-input v-model="row.password" placeholder="" size="normal"></el-input>
                        </template>
                        <template v-else>
                            <div @click="handleActive(row, 'password')">{{ row.password }}</div>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column prop="role" label="角色" />
                <!-- <el-table-column v-if="userType == 'jh' || userType == ''" prop="bargeShip" label="驳船" />
                <el-table-column v-if="userType == 'ym' || userType == ''" prop="fisherShip" label="渔船" /> -->
                <!-- jh显示驳船，ym显示渔船 -->
                <el-table-column v-if="userType == 'jh' || userType == ''" label="驳船" width="180">
                    <template #default="{ row }">
                        <template v-if="activeCell.id == row.id && activeCell.prop == 'bargeShip'">
                            <!-- 选择器 -->
                            <el-select v-model="row.bargeShip" placeholder="Select" size="" style="width: 100%">
                                <el-option v-for="item in bargeShips" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </template>
                        <template v-else>
                            <div @click="handleActive(row, 'bargeShip')">{{ row.bargeShip }}</div>
                        </template>
                    </template>
                </el-table-column>
                <el-table-column v-if="userType == 'ym' || userType == ''" label="渔船" width="180">
                    <template #default="{ row }">
                        <template v-if="activeCell.id == row.id && activeCell.prop == 'fisherShip'">
                            <!-- 选择器 -->
                            <el-select multiple v-model="row.fisherShip" placeholder="Select" size=""
                                style="width: 100%">
                                <el-option v-for="item in fishers" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </template>
                        <template v-else>
                            <div @click="handleActive(row, 'fisherShip')" v-show="row.role == 'ym'">{{ row.fisherShip.join(',')
                                }}</div>
                        </template>
                    </template>
                </el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作" width="180">
                    <template #default="{ row }">
                        <el-popconfirm title="确定删除?" @confirm="handleDelete(row)">
                            <template #reference>
                                <el-button type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                        <el-button type="primary" size="small" @click="handleEdit(row)"
                            v-show="activeCell.id == row.id">保存</el-button>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="form">
            <el-form label-position="right" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <!-- <el-input v-model="form.role"></el-input> -->
                    <!-- 选择器 -->
                    <el-select v-model="form.role" placeholder="Select" size="" style="width: 100%">
                        <el-option label="稽核" value="jh" />
                        <el-option label="渔民" value="ym" />
                        <el-option label="审核" value="jg" />
                    </el-select>
                </el-form-item>
                <el-form-item label="驳船" v-show="form.role=='jh'">
                    <!-- <el-input v-model="form.bargeShip"></el-input> -->
                    <!-- 选择器 -->
                    <el-select v-model="form.bargeShip" placeholder="Select" size="" style="width: 100%">
                        <el-option v-for="item in bargeShips" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="渔船" v-show="form.role=='ym'">
                    <!-- <el-input v-model="form.fisherShip"></el-input> -->
                    <!-- 选择器 -->
                    <!-- <el-select v-model="form.fisherShip" placeholder="Select" size="" style="width: 100%">
                        <el-option v-for="item in fishers" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select> -->
                    <el-select multiple v-model="form.fisherShip" filterable remote reserve-keyword placeholder="请输入">
                        <el-option v-for="item in fishers" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addBargeShipIn">添加</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>

<style lang="less" scoped>
#user {
    height: 100vh;
    width: 100%;
    padding: 10px;
    display: flex;
    box-sizing: border-box;

    :deep(.el-select__selected-item) {
        width: 100px;
    }

    #list {
        flex: 1;
        height: 100%;
        background-color: #fff;
        border-radius: 14px;
        overflow: hidden;
    }

    #form {
        margin-left: 10px;
        width: 600px;
        height: 100%;
        border-radius: 14px;
        // background-color: #c51414; 
        padding: 30px;
        padding-top: 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        border: 1px solid #2b56bb;

        img {
            // position: absolute;
            // top: 0;
            // left: 0;
            padding: 10px;
            width: 100%;
        }
    }
}
</style>